<template>
  <div class="about">
    <heads/>
    <inps/>
    <backs/>
    <button @click="btn">确定</button>
    <div>
    <ul>
      <li v-for="(item,i) in $store.state.content.title" :key='i' 
      :style="{background:$store.state.content.color[i],left:$store.state.content.obj.num1[i]+'px',top:$store.state.content.obj.num2[i]+'px'}
        
      "
      >{{item}}</li>
    </ul>
    </div>
  </div>
</template>
<script>
import heads from '../components/header.vue'
import inps from '../components/inps.vue'
import backs from '../components/back.vue'
export default {
  data() {
    return {
      data() {
        return {
         
           
        }
      },
    }
  },
   components: {
   heads,
   inps,
   backs
  },
  methods: {
    btn(){
      // console.log(this.$store.state.title);
      var aa=this.$store.state.title
      this.$store.commit('tit',aa)
      console.log(this.$store.state.content.title);
      console.log(this.$store.state.content.color);
      var num1= Math.ceil(Math.random()*100);
      var num2=Math.ceil(Math.random()*100);
      console.log(num1);
      console.log(num2);
      var obj={
        num1,
        num2,
      }
    
      this.$store.commit('num',obj)
      console.log(this.$store.state.content.obj);
      // console.log(this.$store.state.content.obj.num1[0]);
    }
  },
}
</script>
<style lang="scss" scoped>
  ul{
    position: absolute;
    list-style: none;
    li{
      position: relative;
      width: 50px;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
  }
</style>>
